<!DOCTYPE HTML>
<html>
<head>
  <title>Timeline | Dynamic Content</title>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.min.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    .progress-wrapper {
      background: white;
      width: 100%;
      height: 18px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .progress {
      height: 100%;
      width: 60%;
      position: absolute;
      left: 0px;
      top: 0px;
      background: #63ed63;
    }

    .progress-label {
      position: absolute;
      z-index: 1;
    }

  </style>
</head>
<body>

<div id="myTimeline"></div>

<script type="text/javascript">
  // DOM element where the Timeline will be attached
  var container = document.getElementById('myTimeline');

  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet([
    {id: 1, value: 0.2, content: 'item 1', start: '2014-04-20', end: '2014-04-26'},
    {id: 2, value: 0.6, content: 'item 2', start: '2014-05-14', end: '2014-05-18'},
    {id: 3, type: 'point', content: 'item 3', start: '2014-04-15', end: '2014-05-18'},
    {id: 4, content: 'item 4 with visibleFrameTemplate in item', start: '2014-04-16', end: '2014-04-26', visibleFrameTemplate: '<div class="progress-wrapper"><div class="progress" style="width:80%"></div><label class="progress-label">80 per cent<label></div>'
    }
  ]);

  // Configuration for the Timeline
  var options = {
    visibleFrameTemplate: function(item) {
      if (item.visibleFrameTemplate) {
        return item.visibleFrameTemplate;
      }
      var percentage = item.value * 100 + '%';
      return '<div class="progress-wrapper"><div class="progress" style="width:' + percentage + '"></div><label class="progress-label">' + percentage + '<label></div>';
    } 
  };

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>